<script setup>

import {onMounted, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
// import userApi from '../../api/user.js'



const navItems=ref([
  { label: '抢购', link: '/concert_show' },
  // { label: '管理用户表', link: '/user' },
  // { label: '管理演唱会', link: '/concert_show_admin' },
  // { label: '管理分区表', link: '/TicketZone' },
  // { label: '管理场馆表', link: '/venue' },
  // { label: '秒杀结果表', link: '/conresult' },
  { label: '订单表', link: '/userorder' },
  // { label: '支付记录表', link: '/userpayment'},

  // { label: 'Commoditie', link: '/show' },
  // { label: 'Technology', link: '/technology' },
  /* { label: 'Blog', link: '/blog' }*/
]);
const userInfo=ref([]);

const search=async ()=>{
  // userInfo.value =await userApi.userInfo();
}
onMounted(()=>{
  search();
})



</script>

<template>
  <div class="common-layout">
    <div class="header-content">
      <div class="logo-wrapper">
        <img class="logo-img" src="../../assets/logo.png"/>
        <p class="logo_text">大麦购票</p>
      </div>
      <nav class="main-nav">
        <ul class="nav-list">
          <li class="nav-item" v-for="(item, index) in navItems" :key="index">
            <router-link :to="item.link" class="nav-link">
              {{ item.label }}
            </router-link>
          </li>
<!--          <li  class="nav-item">-->
<!--            <router-link to="/admin" class="nav-link">-->
<!--              admin-->
<!--            </router-link>-->
<!--          </li>-->
        </ul>
      </nav>
      <!-- 功能区 - 右侧：搜索和购物车 -->
      <div class="header-actions">
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
              v-model="input2"
              style="width: 240px"
              placeholder="搜索"
              :prefix-icon="Search"
          />
        </div>
        <router-link :to="userInfo!=null ? '/user' : '/login'" class="nav-link">
          <el-badge is-dot class="item" :offset="[9,-3]" v-if="userInfo!=null" >
            <el-icon ><img class="uer-head" :src="userInfo.headPortrait"></el-icon>
          </el-badge>
          <el-badge is-dot class="item" v-else>
            <el-icon><User /></el-icon>
          </el-badge>
        </router-link>
        <router-link :to="userInfo!=null ? '/showshorpcar' : '/login'" class="nav-link">
          <el-icon><ShoppingCart /></el-icon>
        </router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
/* Logo样式 */
.logo-wrapper {
  display: flex;
  align-items: center;

}
.logo-img {
  padding-top: 10px;
  height: 100%;
  width: auto; /* 宽度自适应，保持比例 */
  max-width: 80px; /* 限制最大宽度 */
}
.logo_text {
  margin-left: 10px;
  color: #409eff;
  font-size: larger;
  font-style: revert;
  font-family: "Agency FB";
}
.nav-link {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 8px 16px;
}

.nav-link:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 当前激活路由的样式 */
.nav-link.router-link-exact-active {
  color: #409eff; /* Element Plus 主题色 */
  font-weight: bold;
}
/* 核心：Flex布局确保一行显示 */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; /* 元素间间距 */
  background-color: rgba(255, 255, 255, 0.2); /* 浅灰透明 */
  backdrop-filter: blur(8px); /* 毛玻璃效果，可选 */
  z-index: 999;

  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 110px;
}
.uer-head{
  max-width: 30px;
  border-radius: 8px;
}
.nav-list {
  display: flex;
  list-style: none;
  gap: 2rem; /* 菜单项间距 */
  margin: 0;
  padding: 0;
  justify-content: center; /* 菜单居中 */
}
/* 右侧功能区 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 搜索框和购物车间距 */
  flex: 0 0 auto; /* 不伸缩 */
}
</style>